<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单详情 - 家电维修系统</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/css/bootstrap-icons.css}">
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <style>
        .order-detail {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            background: #fff;
            border-radius: 5px;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        }
        .detail-section {
            margin-bottom: 30px;
        }
        .detail-section h3 {
            color: #333;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 2px solid #eee;
        }
        .detail-item {
            margin-bottom: 10px;
        }
        .detail-label {
            font-weight: bold;
            color: #666;
        }
        .track-item {
            padding: 10px;
            border-left: 3px solid #007bff;
            margin-bottom: 10px;
            background: #f8f9fa;
        }
        .track-time {
            color: #666;
            font-size: 0.9em;
        }
    </style>
</head>
<body class="bg-light">
    <div class="container">
        <div class="order-detail">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2>订单详情</h2>
                <a th:href="@{/admin/dashboard}" class="btn btn-secondary">
                    <i class="bi bi-arrow-left"></i> 返回
                </a>
            </div>

            <div class="detail-section">
                <h3>基本信息</h3>
                <div class="row">
                    <div class="col-md-6">
                        <div class="detail-item">
                            <span class="detail-label">订单号：</span>
                            <span id="orderId"></span>
                        </div>
                        <div class="detail-item">
                            <span class="detail-label">订单状态：</span>
                            <span id="orderStatus"></span>
                        </div>
                        <div class="detail-item">
                            <span class="detail-label">创建时间：</span>
                            <span id="createTime"></span>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="detail-item">
                            <span class="detail-label">用户：</span>
                            <span id="userName"></span>
                        </div>
                        <div class="detail-item">
                            <span class="detail-label">维修工：</span>
                            <span id="repairmanName"></span>
                        </div>
                        <div class="detail-item">
                            <span class="detail-label">联系电话：</span>
                            <span id="contactPhone"></span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="detail-section">
                <h3>维修信息</h3>
                <div class="row">
                    <div class="col-md-6">
                        <div class="detail-item">
                            <span class="detail-label">故障类型：</span>
                            <span id="faultType"></span>
                        </div>
                        <div class="detail-item">
                            <span class="detail-label">故障描述：</span>
                            <span id="faultDescription"></span>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="detail-item">
                            <span class="detail-label">维修地址：</span>
                            <span id="address"></span>
                        </div>
                        <div class="detail-item">
                            <span class="detail-label">预约时间：</span>
                            <span id="appointmentTime"></span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="detail-section">
                <h3>维修进度</h3>
                <div id="trackList"></div>
            </div>

            <div class="detail-section">
                <h3>操作</h3>
                <div class="btn-group">
                    <button class="btn btn-primary" onclick="updateOrderStatus(1)" id="btnAccept">接单</button>
                    <button class="btn btn-success" onclick="updateOrderStatus(2)" id="btnStart">开始维修</button>
                    <button class="btn btn-info" onclick="updateOrderStatus(3)" id="btnComplete">完成维修</button>
                    <button class="btn btn-danger" onclick="updateOrderStatus(4)" id="btnCancel">取消订单</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script th:src="@{/admin/js/admin.js}"></script>
    <script>
        $(document).ready(function() {
            const orderId = new URLSearchParams(window.location.search).get('id');
            if (!orderId) {
                showError('订单ID不能为空');
                return;
            }

            loadOrderDetail(orderId);
        });

        function loadOrderDetail(orderId) {
            $.ajax({
                url: `/api/admin/orders/${orderId}`,
                method: 'GET',
                headers: {
                    'Authorization': 'Bearer ' + localStorage.getItem('token')
                },
                success: function(order) {
                    $('#orderId').text(order.id);
                    $('#orderStatus').text(getOrderStatusText(order.status));
                    $('#createTime').text(formatDateTime(order.createTime));
                    $('#userName').text(order.userName);
                    $('#repairmanName').text(order.repairmanName || '未接单');
                    $('#contactPhone').text(order.contactPhone);
                    $('#faultType').text(order.faultType);
                    $('#faultDescription').text(order.faultDescription);
                    $('#address').text(order.address);
                    $('#appointmentTime').text(formatDateTime(order.appointmentTime));

                    // 加载维修进度
                    loadOrderTracks(orderId);

                    // 根据订单状态显示/隐藏按钮
                    updateButtonVisibility(order.status);
                },
                error: function() {
                    showError('加载订单详情失败');
                }
            });
        }

        function loadOrderTracks(orderId) {
            $.ajax({
                url: `/api/admin/orders/${orderId}/tracks`,
                method: 'GET',
                headers: {
                    'Authorization': 'Bearer ' + localStorage.getItem('token')
                },
                success: function(tracks) {
                    const trackList = $('#trackList');
                    trackList.empty();
                    tracks.forEach(track => {
                        trackList.append(`
                            <div class="track-item">
                                <div class="track-content">${track.content}</div>
                                <div class="track-time">${formatDateTime(track.createTime)}</div>
                            </div>
                        `);
                    });
                }
            });
        }

        function updateButtonVisibility(status) {
            $('#btnAccept').hide();
            $('#btnStart').hide();
            $('#btnComplete').hide();
            $('#btnCancel').hide();

            switch(status) {
                case 0: // 待接单
                    $('#btnAccept').show();
                    $('#btnCancel').show();
                    break;
                case 1: // 已接单
                    $('#btnStart').show();
                    $('#btnCancel').show();
                    break;
                case 2: // 维修中
                    $('#btnComplete').show();
                    $('#btnCancel').show();
                    break;
                case 3: // 已完成
                    // 不显示任何按钮
                    break;
                case 4: // 已取消
                    // 不显示任何按钮
                    break;
            }
        }
    </script>
</body>
</html> 